<template>
	<view class="wrapper uni-padding-wrap uni-common-mt">

		<!-- https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4 -->
		<view>
			<!-- <video id="myVideo" :src="videoSrc" @error="videoErrorCallback" :danmu-list="danmuList" enable-danmu
				danmu-btn controls></video> -->
			<video id="myVideo" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4" @error="videoErrorCallback" :danmu-list="danmuList" enable-danmu
				danmu-btn controls></video>

		</view>

		<!-- #ifndef MP-ALIPAY -->
		<view v-if="false">
			<view class="uni-list uni-common-mt">
				<view class="uni-list-cell">
					<view>
						<view class="uni-label">弹幕内容</view>
					</view>
					<view class="uni-list-cell-db">
						<input v-model="danmuValue" class="uni-input" type="text" placeholder="在此处输入弹幕内容" />
					</view>
				</view>
			</view>

			<view class="uni-btn-v">
				<button @click="sendDanmu" class="page-body-button">发送弹幕</button>
			</view>
		</view>
		<!-- #endif -->

		<!-- markdown -->
		<zero-markdown-view :themeColor="themeColor" :markdown="content"></zero-markdown-view>

		<!-- webview -->
		<!-- <web-view :webview-styles="webviewStyles" src="https://vue3js.cn/interview/vue/new_vue.html"></web-view> -->

	</view>

</template>


<script>
	import {
		mapState
	} from "vuex";

	export default {
		data() {
			return {
				defaultSrc: "https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4",
				// videoSrc: 'https://v9-web.toutiaovod.com/d61755847eee17c2204e9a2f51d88c94/6473cd28/video/tos/cn/tos-cn-ve-4/o8AAM8ubXiVVnKfejbpCfpAvAaDABSdRiIELgU/?a=24&ch=0&cr=0&dr=0&er=0&lr=unwatermarked&net=5&cd=0%7C0%7C0%7C0&br=249&bt=249&cs=0&ds=3&ft=Pg6SNj2-ccxiDIGusfusdetlN4gd3-vpuB9YWHqkx.sP2Xch00q-JY-NsN5wFRf&mime_type=video_mp4&qs=0&rc=OWc0aWhoODY4NmY2Zmk3PEBpajtlcGU6ZnB5azMzNDczM0A1M18yNDEzNWMxLzZeYGNjYSNma2ZucjRvXy9gLS1kLWFzcw%3D%3D&l=20230529044420EA12E3234E7C3BC46DE7&btag=e00030000',
				videoSrc: '',
				// baseUrl: "http://localhost:3000/mds/",

				danmuList: [{
						text: '第 1s 出现的弹幕',
						color: '#ff0000',
						time: 1
					},
					{
						text: '第 3s 出现的弹幕',
						color: '#ff00ff',
						time: 3
					}
				],
				danmuValue: '',

				// markdown
				content: '',
			}
		},

		computed: mapState([
			"baseUrl"
		]),

		onLoad(item) {
			console.log("detail onLoad,item=", item);
			this.videoSrc = this.baseUrl + "/mds" + item.video

			uni.request({
				// url: 'http://localhost:8001/file/mdtest.md',
				url: this.baseUrl + "/mds" + item.href,
				success: (res) => {
					console.log("success", res.data);
					this.content = res.data
				},
				fail(err) {
					console.log("fail", err);
				}
			});

		},

		onReady: function(res) {
			// #ifndef MP-ALIPAY
			this.videoContext = uni.createVideoContext('myVideo')
			// #endif
		},

		methods: {
			sendDanmu: function() {
				this.videoContext.sendDanmu({
					text: this.danmuValue,
					color: this.getRandomColor()
				});
				this.danmuValue = '';
			},
			videoErrorCallback: function(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			getRandomColor: function() {
				const rgb = []
				for (let i = 0; i < 3; ++i) {
					let color = Math.floor(Math.random() * 256).toString(16)
					color = color.length == 1 ? '0' + color : color
					rgb.push(color)
				}
				return '#' + rgb.join('')
			}
		},

	}
</script>


<style lang="scss" scoped>
	.wrapper {
		padding-bottom: 100rpx;

		video {
			width: 100%;
		}
	}
</style>